<template>
  <scale-box>
    <div class="page">
      <headerDiv />
      <div class="content">
        <div class="left">
          <leftTop />
          <leftMiddle />
          <leftBottom />
        </div>
        <div class="middle">
          <middle />
        </div>
        <div class="right">
          <rightTop ref="rightTop" />
          <rightMiddle ref="rightMiddle" />
          <rightBottom />
        </div>
      </div>
      <div class="headerBottom"></div>
    </div>
  </scale-box>
</template>

<script>
import ScaleBox from "@/components/ScaleBox";
import {
  leftTop,
  leftMiddle,
  leftBottom,
  rightTop,
  middle,
  rightMiddle,
  rightBottom,
  headerDiv,
} from "./components3";
export default {
  name: "Cockpit2",
  components: {
    ScaleBox,
    leftTop,
    leftMiddle,
    leftBottom,
    rightTop,
    rightMiddle,
    middle,
    rightBottom,
    headerDiv,
  },
  data() {
    return {
      mapData: {},
      mapList: [],
    };
  },
  methods: {
    clickBar(list) {
      this.$refs.rightMiddle.setTableList(list);
    },
    nowEmpty() {
      console.log("空了");
      this.$refs.rightTop.middleEmpty();
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="less" scoped>
.bgCir {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0px;
  img {
    // width: 1100px;
  }
}
.page {
  width: 3072px;
  height: 1664px;
  pointer-events: auto;
  image-rendering: -webkit-optimize-contrast;
  box-sizing: border-box;
  background: rgba(0, 15, 46, 1);
  background-image: url("./assets/bg.png");
  position: relative;
  background-size: 100% 100%;

  .content {
    position: absolute;
    top: 133px;
    bottom: 50px;
    z-index: 10;
    left: 48px;
    right: 48px;
    display: flex;
    padding-top: 23px;
    .left,
    .right {
      width: 724px;
      height: 100%;
      position: relative;
      z-index: 1;
    }
    .left {
      z-index: 10;
    }
    .right {
      z-index: 10;
    }
    .middle {
      flex: 1;
      height: 100%;
    }
  }
  .org-amap {
    width: 100%;
    height: 100%;
    z-index: 2;
    top: 0;
    left: 0;
    position: absolute;
    iframe {
      width: 100%;
      height: 100%;
      background: transparent;
    }
  }
  .headerBottom {
    position: absolute;
    height: 50px;
    background-image: url("./assets/bottom.png");
    bottom: 0;
    left: 0;
    right: 0;
  }
}
.map-modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}
</style>
<style lang="less">
.page {
  .topPic {
    margin-bottom: 14px;
  }
}
.map {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}
.map-modal-hidden {
  opacity: 0;
  z-index: -1;
  position: absolute;
}
</style>
